<script setup lang="ts">
import UserSlide from '@components/UserSlide.vue'
import MusicListInfo from '@components/MusicListInfo.vue'
import CDInfo from '@components/index/CDInfo.vue'
</script>
<template>
    <div class="music-container">
        <div class="left">
            <MusicListInfo />
            <CDInfo />
        </div>
        <div class="slide">
            <UserSlide />
        </div>
    </div>
</template>
<style lang="css" scoped>
.left {
    flex: 9;
    padding: 5px 10px 0;
    width: 50%;
    flex-wrap: wrap;
    display: flex;
}

.slide {
    width: 100px;
    flex: 3;
    border-left: #D4D4D4 1px solid;
}


.list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.music {
    display: flex;
    width: var(--music-list-width);
    height: var(--music-list-height);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
}

.music .title {
    text-decoration: none;
    font-size: 14px;
    margin-top: 5px;
    width: var(--music-list-img-size);
    height: var(--content-text-height);
    cursor: pointer;
    color: black;
}

.music a:hover {
    text-decoration: underline;
}

.music img {
    width: var(--music-list-img-size);
    height: var(--music-list-img-size);
    cursor: pointer;
}

.music-container {
    display: flex;
}
</style>